<template>
  <div class="profile-page">
    <!-- 顶部问候语和头像 -->
    <div class="profile-header">
      <h2 class="greeting">Hi, {{ username }}</h2>
      <div class="header-avatar" @click="handleAvatarClick">
        <UserAvatar
          :key="`avatar-${avatarUpdateTime}`"
          size="large"
          :avatar="userAvatar"
          :user-name="username"
          clickable
        />
        <input
          ref="avatarInputRef"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleAvatarChange"
        />
      </div>
    </div>

    <!-- 统计信息饼图 -->
    <div class="stats-section">
      <div class="stats-chart-wrapper">
        <div class="chart-container">
          <div class="stats-chart">
            <svg class="chart-svg" viewBox="0 0 200 200">
            <defs>
              <!-- 白色发光效果滤镜 -->
              <filter id="whiteGlow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>
            
            <!-- 饼图扇形 -->
            <path
              v-for="(segment, index) in segmentPaths"
              :key="index"
              :d="segment.path"
              class="chart-segment"
              :class="{ 'active': hoveredSegment === index }"
              @mouseenter="hoveredSegment = index"
              @mouseleave="hoveredSegment = null"
            />
            
            <!-- 标签文字 -->
            <template v-for="(segment, index) in segmentPaths" :key="`label-${index}`">
              <text
                v-if="segment.angle > 0"
                class="chart-label-text"
                :class="{ 'active': hoveredSegment === index }"
              >
                <textPath :href="`#textPath-${index}`" startOffset="50%">
                  {{ segment.label }}
                </textPath>
              </text>
            </template>
            
            <!-- 文字路径 -->
            <template v-for="(segment, index) in segmentPaths" :key="`textPath-${index}`">
              <path
                v-if="segment.angle > 0"
                :id="`textPath-${index}`"
                :d="segment.textPath"
                fill="none"
              />
            </template>
          </svg>
          </div>
          
          <!-- 外部标签 -->
          <div class="chart-labels">
            <div 
              v-for="(stat, index) in stats" 
              :key="index"
              class="chart-label"
              :class="{ 'active': hoveredSegment === index }"
              @mouseenter="hoveredSegment = index"
              @mouseleave="hoveredSegment = null"
            >
              <div class="label-text">{{ stat.label.toUpperCase() }}</div>
              <div class="label-value">{{ stat.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能按钮网格 -->
    <div class="function-grid">
      <div class="function-button" @click="handleAccountInfo">
        <div class="button-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="button-label">账户信息</div>
      </div>
      
      <div class="function-button" @click="handleWorkRecord">
        <div class="button-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="button-label">工作记录</div>
      </div>
      
      <div class="function-button" @click="handleLeaveManagement">
        <div class="button-icon">
          <el-icon><Calendar /></el-icon>
        </div>
        <div class="button-label">请假管理</div>
      </div>
      
      <div class="function-button" @click="handleLogout">
        <div class="button-icon">
          <el-icon><SwitchButton /></el-icon>
        </div>
        <div class="button-label">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { User, Document, Calendar, SwitchButton } from "@element-plus/icons-vue";
import UserAvatar from "@/components/UserAvatar.vue";
import { getUserInfo, logout, getToken } from "@/utils/auth";
import { getUserProfile, getAuthRole } from "@/api/system/user";
import { listInformation } from "@/api/information/information";
import axios from "axios";

const router = useRouter()

// 用户信息
const userInfo = ref({
  userId: null,
  username: "",
  nickName: "",
  realName: "",
  avatar: "",
  roleKey: ""
})

// 用户角色key，用于过滤数据
const userRoleKey = ref("")

// 统计数据
const stats = ref([
  { label: '待维修', value: 0 },
  { label: '待审核', value: 0 },
  { label: '已整改', value: 0 }
])

// 悬停的扇形索引
const hoveredSegment = ref(null)

// 头像上传相关
const avatarInputRef = ref(null)


// 计算用户名（优先显示用户昵称）
const username = computed(() => {
  const user = userInfo.value
  // 优先显示用户昵称
  if (user && user.nickName && user.nickName.trim() !== '') {
    return user.nickName
  }
  if (user && user.nickname && user.nickname.trim() !== '') {
    return user.nickname
  }
  // 如果没有昵称，显示真实姓名
  if (user && user.realName && user.realName.trim() !== '') {
    return user.realName
  }
  // 最后显示账号名称
  if (user && user.username && user.username.trim() !== '') {
    return user.username
  }
  // 从 localStorage 获取
  const storedUser = getUserInfo()
  if (storedUser) {
    return storedUser.nickName || storedUser.nickname || storedUser.realName || storedUser.userName || storedUser.username || '用户'
  }
  return '用户'
})

// 头像更新时间戳，用于强制刷新头像
const avatarUpdateTime = ref(Date.now())

// 计算用户头像
const userAvatar = computed(() => {
  const user = userInfo.value
  let avatarUrl = ''
  
  if (user && user.avatar) {
    avatarUrl = user.avatar
  } else {
    const storedAvatar = localStorage.getItem('userAvatar')
    if (storedAvatar) {
      avatarUrl = storedAvatar
    } else {
      const storedUser = getUserInfo()
      if (storedUser && storedUser.avatar) {
        avatarUrl = storedUser.avatar
      }
    }
  }
  
  // 如果有头像URL，添加时间戳参数避免缓存
  if (avatarUrl) {
    const separator = avatarUrl.includes('?') ? '&' : '?'
    return `${avatarUrl}${separator}_t=${avatarUpdateTime.value}`
  }
  
  return ''
})

// 加载用户信息
const loadUserInfo = async () => {
  try {
    const profileResponse = await getUserProfile()
    if (profileResponse.code === 200 && profileResponse.data) {
      const profileData = profileResponse.data
      
      // 从 localStorage 获取备用数据
      const storedUser = getUserInfo()
      
      // 获取用户昵称：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let nickNameValue = profileData.nickName || profileData.nickname
      if (!nickNameValue || nickNameValue === null || nickNameValue === undefined || String(nickNameValue).trim() === '') {
        if (storedUser) {
          nickNameValue = storedUser.nickName || storedUser.nickname || ''
        } else {
          nickNameValue = ''
        }
      }
      if (nickNameValue) {
        nickNameValue = String(nickNameValue).trim()
      }
      
      userInfo.value = {
        userId: profileData.userId,
        username: profileData.userName || profileData.username || "",
        nickName: nickNameValue || "",
        realName: profileData.realName || nickNameValue || profileData.userName || "",
        avatar: profileData.avatar || profileData.avatarUrl || "",
        roleKey: ""
      }
      if (userInfo.value.avatar) {
        localStorage.setItem('userAvatar', userInfo.value.avatar)
      }
      
      // 获取用户角色
      if (userInfo.value.userId) {
        try {
          const roleRes = await getAuthRole(userInfo.value.userId)
          if (roleRes.code === 200 && roleRes.user.roles && roleRes.user.roles.length > 0) {
            userInfo.value.roleKey = roleRes.user.roles[0].roleKey || ""
            userRoleKey.value = userInfo.value.roleKey
          }
        } catch (error) {
          console.warn("获取用户角色失败:", error)
        }
      }
      
      return
    }
  } catch (apiError) {
    console.warn("API获取用户信息失败，使用本地存储:", apiError)
  }

  // 回退到localStorage
  const storedUser = getUserInfo()
  if (storedUser) {
    userInfo.value = {
      userId: storedUser.userId,
      username: storedUser.userName || storedUser.username || "",
      nickName: storedUser.nickName || storedUser.nickname || "",
      realName: storedUser.realName || storedUser.nickName || storedUser.nickname || storedUser.userName || "",
      avatar: storedUser.avatar || storedUser.avatarUrl || "",
      roleKey: storedUser.roleKey || ""
    }
    userRoleKey.value = storedUser.roleKey || ""
  }
  
  const storedAvatar = localStorage.getItem('userAvatar')
  if (storedAvatar) {
    userInfo.value.avatar = storedAvatar
  }
}

// 获取统计数据（只统计当前用户的数据）
const fetchStats = async () => {
  try {
    // 构建查询条件，根据用户角色过滤数据
    let query = { pageNum: 1, pageSize: 9999 }
    
    // 根据用户角色添加过滤条件（与工作记录页面逻辑一致）
    if ([
      'inspector', 'inspec', 'inspect', '巡检', '巡检人员'
    ].includes(userRoleKey.value)) {
      // 巡检人员：只统计自己检测的记录
      query.detectionBy = userInfo.value.userId
    } else if ([
      'maintainer', 'maintain', 'maintenance', '维修', '维修人员'
    ].includes(userRoleKey.value)) {
      // 维修人员：只统计自己维修的记录
      query.maintenanceBy = userInfo.value.userId
    }
    // 如果没有角色或角色不匹配，不添加过滤条件（显示所有数据）
    // 如果需要只显示当前用户相关的数据，可以在这里添加其他逻辑
    
    const res = await listInformation(query)
    if (res.code === 200 && Array.isArray(res.rows)) {
      const all = res.rows
      // 统计当前用户的数据
      stats.value[0].value = all.filter(i => i.status === 0 || i.status === 3 || i.status === 4).length // 待维修（包括已拒绝、已接取）
      stats.value[1].value = all.filter(i => i.status === 2).length // 待审核
      stats.value[2].value = all.filter(i => i.status === 1).length // 已整改
    } else {
      stats.value.forEach(s => s.value = 0)
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    stats.value.forEach(s => s.value = 0)
  }
}

// 计算总数量
const totalCount = computed(() => {
  return stats.value.reduce((sum, item) => sum + item.value, 0)
})

// 计算每个扇形的角度
const segmentAngles = computed(() => {
  if (totalCount.value === 0) {
    return [
      { start: 0, end: 120, angle: 120 },
      { start: 120, end: 240, angle: 120 },
      { start: 240, end: 360, angle: 120 }
    ]
  }
  
  const angles = []
  let currentAngle = 0
  
  stats.value.forEach((item, index) => {
    const angle = (item.value / totalCount.value) * 360
    angles.push({
      start: currentAngle,
      end: currentAngle + angle,
      angle: angle
    })
    currentAngle += angle
  })
  
  return angles
})

// 生成扇形路径（实心饼图，从中心开始）
const getSegmentPath = (startAngle, endAngle, innerRadius = 0, outerRadius = 90) => {
  const start = (startAngle * Math.PI) / 180
  const end = (endAngle * Math.PI) / 180
  
  const centerX = 100
  const centerY = 100
  
  // 如果内圆半径为0，直接从中心点开始
  if (innerRadius === 0) {
    const x2 = centerX + outerRadius * Math.cos(start)
    const y2 = centerY + outerRadius * Math.sin(start)
    const x3 = centerX + outerRadius * Math.cos(end)
    const y3 = centerY + outerRadius * Math.sin(end)
    
    const largeArc = endAngle - startAngle > 180 ? 1 : 0
    
    return `M ${centerX} ${centerY} L ${x2} ${y2} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x3} ${y3} Z`
  } else {
    const x1 = centerX + innerRadius * Math.cos(start)
    const y1 = centerY + innerRadius * Math.sin(start)
    const x2 = centerX + outerRadius * Math.cos(start)
    const y2 = centerY + outerRadius * Math.sin(start)
    const x3 = centerX + outerRadius * Math.cos(end)
    const y3 = centerY + outerRadius * Math.sin(end)
    const x4 = centerX + innerRadius * Math.cos(end)
    const y4 = centerY + innerRadius * Math.sin(end)
    
    const largeArc = endAngle - startAngle > 180 ? 1 : 0
    
    return `M ${x1} ${y1} L ${x2} ${y2} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x3} ${y3} L ${x4} ${y4} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x1} ${y1} Z`
  }
}

// 生成文字路径
const getTextPath = (startAngle, endAngle, radius = 75) => {
  const start = (startAngle * Math.PI) / 180
  const end = (endAngle * Math.PI) / 180
  const largeArc = endAngle - startAngle > 180 ? 1 : 0
  
  const x1 = 100 + radius * Math.cos(start)
  const y1 = 100 + radius * Math.sin(start)
  const x2 = 100 + radius * Math.cos(end)
  const y2 = 100 + radius * Math.sin(end)
  
  return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`
}

// 计算所有扇形的路径和标签
const segmentPaths = computed(() => {
  return segmentAngles.value.map((angle, index) => ({
    path: getSegmentPath(angle.start, angle.end),
    textPath: getTextPath(angle.start, angle.end),
    label: stats.value[index].label.toUpperCase(),
    angle: angle.angle
  }))
})

// 处理头像点击
const handleAvatarClick = () => {
  if (avatarInputRef.value) {
    avatarInputRef.value.click()
  }
}

// 处理头像文件选择
const handleAvatarChange = async (event) => {
  const file = event.target.files?.[0]
  if (!file) return

  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }

  // 验证文件大小（限制为5MB）
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return
  }

  try {
    // 创建FormData
    const formData = new FormData()
    formData.append('avatarfile', file)

    // 直接使用axios上传，避免request拦截器将FormData转换为JSON
    // 不设置Content-Type，让浏览器自动设置（包含boundary）
    const response = await axios.post('http://localhost:8080/system/user/profile/avatar', formData, {
      headers: {
        'Authorization': getToken() ? `Bearer ${getToken()}` : ''
      }
    })
    
    if (response.data.code === 200) {
      ElMessage.success('头像上传成功')
      // 更新头像URL - 尝试多种可能的响应格式
      let avatarUrl = ''
      if (response.data.data?.avatar) {
        avatarUrl = response.data.data.avatar
      } else if (response.data.data?.url) {
        avatarUrl = response.data.data.url
      } else if (response.data.avatar) {
        avatarUrl = response.data.avatar
      } else if (response.data.url) {
        avatarUrl = response.data.url
      } else if (response.data.imgUrl) {
        avatarUrl = response.data.imgUrl
      }
      
      if (avatarUrl) {
        // 确保URL是完整的（如果是相对路径，添加baseURL）
        if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://') && !avatarUrl.startsWith('data:')) {
          if (avatarUrl.startsWith('/')) {
            avatarUrl = 'http://localhost:8080' + avatarUrl
          } else {
            avatarUrl = 'http://localhost:8080/' + avatarUrl
          }
        }
        
        // 立即更新响应式数据，让头像立即显示
        userInfo.value.avatar = avatarUrl
        // 更新本地存储
        localStorage.setItem('userAvatar', avatarUrl)
        // 更新时间戳，强制刷新头像显示（这会触发key变化，强制重新渲染组件）
        avatarUpdateTime.value = Date.now()
        // 触发用户信息更新事件
        window.dispatchEvent(new Event('userInfoUpdated'))
        
        // 使用 nextTick 确保DOM更新后再重新加载用户信息
        const { nextTick } = await import('vue')
        await nextTick()
        // 重新加载用户信息（确保数据同步）
        await loadUserInfo()
      } else {
        console.warn('头像上传成功，但未找到头像URL', response.data)
        ElMessage.warning('头像上传成功，但获取头像地址失败，请刷新页面查看')
      }
    } else {
      ElMessage.error(response.data.msg || '头像上传失败')
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error(error.response?.data?.msg || error.message || '头像上传失败，请稍后重试')
  } finally {
    // 清空input，以便可以重复选择同一文件
    if (avatarInputRef.value) {
      avatarInputRef.value.value = ''
    }
  }
}

// 按钮处理函数
const handleAccountInfo = () => {
  router.push('/account-info')
}

const handleWorkRecord = () => {
  router.push('/work-record')
}

const handleLeaveManagement = () => {
  router.push('/leave')
}

const handleLogout = () => {
  ElMessageBox.confirm('确认退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    logout()
    router.push('/login')
  })
}

// 组件挂载时加载用户信息
onMounted(async () => {
  // 先加载用户信息和角色
  await loadUserInfo()
  // 然后获取统计数据（此时userRoleKey已经设置）
  await fetchStats()
  // 监听头像更新事件
  window.addEventListener('userInfoUpdated', loadUserInfo)
})

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('userInfoUpdated', loadUserInfo)
})
</script>

<style lang="scss" scoped>
.profile-page {
  transition: all 0.3s ease;
  background: transparent; /* 透明背景，显示全局渐变背景 */
  min-height: calc(100vh - 100px);
  padding-bottom: 20px;
  
  // 顶部问候语和头像
  .profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px;
    margin-bottom: 40px;
    
    .greeting {
      font-size: 36px;
      font-weight: 600;
      color: #ffffff;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      letter-spacing: -0.5px;
      
      @media (max-width: 768px) {
        font-size: 32px;
      }
    }
    
    .header-avatar {
      flex-shrink: 0;
      cursor: pointer;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  // 统计信息饼图（参考图片：深色背景，深灰色扇形，白色发光选中效果）
  .stats-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 20px;
    
    .stats-chart-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    
    .chart-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    
    .stats-chart {
      position: relative;
      width: 300px;
      height: 300px;
      /* 玻璃拟态背景 */
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      /* 玻璃边框 */
      border: 1px solid rgba(255, 255, 255, 0.2);
      /* 玻璃拟态效果 */
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      /* 柔和阴影 */
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
      padding: 0;
      box-sizing: border-box;
      overflow: visible;
      
      @media (max-width: 768px) {
        width: 260px;
        height: 260px;
      }
      
      .chart-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        
        .chart-segment {
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          /* 玻璃拟态扫形：半透明灰色 */
          fill: rgba(200, 200, 200, 0.3);
          /* 玻璃边框 */
          stroke: rgba(255, 255, 255, 0.2);
          stroke-width: 1;
          
          /* 为不同的数据类型设置不同的透明度 */
          &:nth-child(1) {
            fill: rgba(180, 180, 180, 0.4); /* 待维修 */
          }
          
          &:nth-child(2) {
            fill: rgba(160, 160, 160, 0.35); /* 待审核 */
          }
          
          &:nth-child(3) {
            fill: rgba(140, 140, 140, 0.3); /* 已整改 */
          }
          
          &:hover,
          &.active {
            /* 悬停时：白色玻璃效果 */
            fill: rgba(255, 255, 255, 0.8) !important;
            stroke: rgba(255, 255, 255, 0.6) !important;
            stroke-width: 2;
            /* 玻璃发光效果 */
            filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
                    drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
          }
        }
        
        .chart-label-text {
          font-size: 11px;
          fill: rgba(100, 100, 100, 0.8);
          text-transform: uppercase;
          letter-spacing: 1.5px;
          font-weight: 600;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
          pointer-events: none;
          transition: all 0.4s ease;
          
          &.active {
            fill: rgba(60, 60, 60, 1);
            font-weight: 700;
            /* 深色文字阴影 */
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
          }
        }
      }
    }
    
    .chart-labels {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      
      @media (max-width: 768px) {
        gap: 24px;
      }
      
      .chart-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: all 0.4s ease;
        padding: 12px 16px;
        border-radius: 12px;
        /* 玻璃拟态标签背景 */
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        &:hover,
        &.active {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
          transform: translateY(-3px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .label-text {
          font-size: 10px;
          font-weight: 600;
          color: rgba(100, 100, 100, 0.9);
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 6px;
          transition: all 0.4s ease;
        }
        
        .label-value {
          font-size: 20px;
          font-weight: 700;
          color: rgba(60, 60, 60, 1);
          transition: all 0.4s ease;
        }
        
        &.active {
          .label-text {
            color: rgba(40, 40, 40, 1);
          }
          
          .label-value {
            color: rgba(20, 20, 20, 1);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
  
  // 功能按钮网格（变小）
  .function-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 85px; /* 往下移一点 */
    
    @media (max-width: 768px) {
      gap: 12px;
      padding: 0 16px;
      max-width: 100%;
    }
    
    .function-button {
      /* 白色玻璃拟态效果 */
      background: rgba(255, 255, 255, 0.25);
      border-radius: 20px;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      /* 玻璃拟态边框和模糊效果 */
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      /* 柔和阴影 */
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      min-height: 110px;
      
      @media (max-width: 768px) {
        padding: 20px 16px;
        min-height: 100px;
        border-radius: 16px;
      }
      
      &:hover {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.35);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 
          0 12px 40px rgba(0, 0, 0, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }
      
      &:active {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 
          0 6px 24px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      
      .button-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        /* 玻璃拟态图标背景 */
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 
          0 4px 16px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        
        @media (max-width: 768px) {
          width: 44px;
          height: 44px;
          margin-bottom: 12px;
        }
        
        .el-icon {
          font-size: 24px;
          color: rgba(80, 80, 80, 0.8);
          transition: all 0.3s ease;
          
          @media (max-width: 768px) {
            font-size: 22px;
          }
        }
      }
      
      &:hover .button-icon {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.35);
        transform: scale(1.05);
        
        .el-icon {
          color: rgba(60, 60, 60, 1);
        }
      }
      
      .button-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(80, 80, 80, 0.9);
        text-align: center;
        transition: all 0.3s ease;
        
        @media (max-width: 768px) {
          font-size: 13px;
        }
      }
      
      &:hover .button-label {
        color: rgba(60, 60, 60, 1);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .profile-page {
    .profile-header {
      padding: 20px 16px;
      margin-bottom: 32px;
    }
  }
}
</style> 